<template>
    <div >
        <h3>当前求和为: {{sum}}</h3>
        <h3>放大10倍后的当前求和为: {{bigSum}}</h3>
        <h3>我在{{school }},学习{{subject }}</h3>
        <select v-model.number="num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(num)">+</button>
        <button @click="decrement(num)">-</button>
        <button @click="incrementOdd(num)">当前求和为奇数再加</button>
        <button @click="incrementWait(num)">等一等再加</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data() {
      return {
        //用户选择的数字
        num: 1
      }
  },
  methods: {
    //加1
    /* increment() {
      this.$store.commit('increment', this.num);
    },
    //减1
    decrement() {
      this.$store.commit('decrement', this.num);
    }, */
    //借助mapMutations生成对应的方法,方法中会调用commit方法去联系mutations(对象写法)
    ...mapMutations({increment: 'increment',decrement: 'decrement'}),
    // ...mapMutations(['increment', 'decrement']),
    //当前求和为奇数再加
    /* incrementOdd() {
      this.$store.dispatch('incrementOdd', this.num);
    },
    //等一等再加
    incrementWait() {
      this.$store.dispatch('incrementWait', this.num);
    }  */
   //借助mapActions生成对应的方法,方法中会调用dispatch方法去联系actions(对象写法)
  //  ...mapActions({incrementOdd: 'incrementOdd',incrementWait: 'incrementWait'})
   //借助mapActions生成对应的方法,方法中会调用dispatch方法去联系actions(数组写法)
  ...mapActions(['incrementOdd','incrementWait'])
  },
  computed: {
    // 借助mapstate生成计算属性，从state中读取数据(对象写法)
    // ...mapState({sum:'sum', school:'school', subject:'subject'}),
    
    // 借助mapstate生成计算属性，从state中读取数据(数组写啊)
    ...mapState(['sum','school','subject']),
     
     // 借助mapgetters生成计算属性，从getters中读取数据(对象写法)
    // ...mapGetters({bigSum: 'bigSum'})
    // 借助mapgetters生成计算属性，从getters中读取数据(数组写法)
    ...mapGetters(['bigSum'])
  }
  

}
</script>

<style scoped>
    button {
      margin: 4px;
    }
</style>